// src/views/cart/Index.tsx
import { useEffect, useState } from "react"
import { Button, Image, Space, Table } from 'antd'
import { WhatsAppOutlined } from '@ant-design/icons'

import { getCartData } from "../../api/cart"
type ListProps = {}
export const List = (props: ListProps) => {
    const [cartList, setCartList] = useState<any[]>([]) //购物车列表
    const [current, setCurrent] = useState(1) // 页码
    const [pageSize, setPageSize] = useState(5) // 每页显示个数

    const getCartList = async () => {
        let res = await getCartData()
        console.log(res.data.data)
        setCartList(res.data.data)
    }
    useEffect(() => {
        // IFFE 立即执行函数使用 async await
        // 单独封装一个方法，我们推荐的，方便复用
        getCartList()
    }, [])
    return (
        <>
            <Space direction='vertical' style={{ width: '100%' }}>
                <Table
                    dataSource={cartList}
                    rowKey="cartid"
                    scroll={{ y: document.body.offsetHeight - 330 }}
                    bordered
                    pagination={{
                        current,
                        pageSize,
                        onChange(page, pageSize) {
                            setCurrent(page)
                            setPageSize(pageSize)
                        }
                    }}
                >
                    <Table.Column
                        title="序号"
                        render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
                    ></Table.Column>
                    <Table.Column
                        title="图片"
                        dataIndex="img1"
                        render={(text) => { return <Image src={text} height={75} /> }}
                    ></Table.Column>
                    <Table.Column
                        title="产品分类"
                        dataIndex="category"
                    ></Table.Column>
                    <Table.Column
                        title="产品名称"
                        dataIndex="proname"
                    ></Table.Column>
                    <Table.Column
                        title="购买数量"
                        dataIndex="discount"
                    ></Table.Column>
                    <Table.Column
                        title="单价"
                        dataIndex="originprice"
                    ></Table.Column>
                    <Table.Column
                        title="操作"
                        render={(text, record: any, index) => {
                            return (
                                <Space>
                                    <Button danger shape="circle" icon={<WhatsAppOutlined />} />
                                </Space>
                            )
                        }}
                    ></Table.Column>
                </Table>
            </Space>
        </>
    )
}